<template>
    <div class="commend_container">
        <HeaderTop :goBack="true" :headTitle="'推荐有奖'"></HeaderTop>
        <section class="activity_banner">
            <img :src="banner_img" alt="">
        </section>
        <section class="invite_firend">
            <div class="invite_firend_style" v-for="item in inviteMethodList" :key="item.id">
                <img :src="item.imgPath" @click="fenxiang(item)">
                <p>{{item.text}}</p>
            </div>
            
        </section>
        <section class="invite_num">
            <div class="invite_num_item" v-for="item in inviteNum" :key="item.id">
                <p>{{item.name}}</p>
                <p><span>{{item.num}}</span><span>{{item.danwei}}</span></p>
            </div>
        </section>
        <p class="income_detail">-收益明细-</p>
        <section class="incom_tips">
            <img :src="qianbao_img">
            <p>还不赶紧去邀请好友</p>
        </section>
        <alert-tip v-if="showAlert" :alertText="alertText" @close="closeAlert"></alert-tip>
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop';
import AlertTip from '@src/components/common/AlertTips'
export default {
    components:{
        HeaderTop,
        AlertTip
    },
    data(){
        return {
            banner_img:require('../../../assets/imgs/activity.png').default,
            qianbao_img:require('../../../assets/imgs/qianbao.png').default,
            showAlert:false,
            alertText:'',
            inviteMethodList:[
                {
                    id:1,
                    img:'weixin',
                    imgPath:'',
                    text:'邀请微信好友'
                },{
                    id:2,
                    img:'qq',
                    imgPath:'',
                    text:'邀请QQ好友'
                },{
                    id:3,
                    img:'fenxiang',
                    imgPath:'',
                    text:'面对面邀请'
                }
            ],
            inviteNum:[
                {
                    id:10001,
                    name:'累计收益',
                    num:0,
                    danwei:'元'
                },
                {
                    id:10002,
                    name:'成功邀请',
                    num:0,
                    danwei:'人'
                }
            ]
        }
    },
    created(){
        this.inviteMethodList.forEach(item=>{
            item.imgPath=require(`../../../assets/imgs/${item.img}.png`).default
        })
    },
    methods:{
        closeAlert(){
            this.showAlert=false;
        },
        fenxiang(item){
            this.showAlert=true;
            this.alertText=`${item.text} 请使用App 方式邀请`
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.commend_container{
    p, span{
        font-family: Helvetica Neue,Tahoma,Arial;
    }
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f2;
    padding-top: 1.95rem;
    overflow-y: scroll;
    z-index: 216;
    .activity_banner{
        img{
            width: 100%;
        }
    }
    .invite_firend{
        display: flex;
        margin-top: 0.2rem;
        background: #fff;
        .invite_firend_style{
            padding-top: 0.5rem;
            flex: 1;
            @include fj(center);
            align-items: center;
            flex-direction: column;
            img{
                width: 42%;
            }
            p{
                @include sc(0.55rem,#666);
                padding: 0.5rem 0;
            }
        }
    }
    .invite_num{
        display: flex;
        .invite_num_item{
            flex: 1;
            margin-top: 0.5rem;
            @include fj(center);
            align-items: center;
            flex-direction: column;
            p:nth-child(1){
                @include sc(0.55rem,#666);
            }
            p:nth-child(2){
                span:nth-child(1){
                    @include sc(0.9rem,#ff5633);
                    font-weight: 700;
                }
                span:nth-child(2){
                    margin-left: 0.2rem;
                    @include sc(0.5rem,#999);
                }
            }
        }
        .invite_num_item:nth-of-type(1){
            border-right: 0.055rem solid #fff;
        }
    }
    .income_detail{
        text-align: center;
        margin-top: 0.4rem;
        @include sc(0.55rem,#999);
    }
    .incom_tips{
        margin-top: 0.8rem;
        text-align: center;
        img{
            @include wh(3rem,3rem);
        }
        p{
            @include sc(.5rem, #999);
            padding-bottom: 1rem;
        }
    }
}
</style>